<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>魅族官网-魅族官网</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入分层的css 文件 -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/content.css">
  <link rel="stylesheet" href="css/navi.css">
  <link rel="stylesheet" href="css/classification.css">
  <link rel="stylesheet" href="css/hots.css">
  <link rel="stylesheet" href="css/mobile.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/copyright.css">
  <link rel="stylesheet" href="css/backtotop.css">
</head>
<body>
    <!-- header 区域开始 -->
    <div class="header">
        <div class="inner-c header-c">
            <div class="left">
                <ul>     
                    <li><a href="#">魅族官网</a></li>
                    <li><a href="#">魅族商城</a></li>
                    <li><a href="#">Flyme</a></li>
                    <li><a href="#">专卖店</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="right">
                <ul>         
                    <li class="collection"><a href="#">我的收藏<span class="tips">new</span></a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- header 区域结束 -->
    <!-- content 区域开始 -->
    <div class="content">
        <!-- 导航 navi 区域开始 -->
        <div class="navi">
            <div class="inner-c navi-c">
                <img src="images/logo.png" alt="">
                <ul>
                    <li><a href="#">PRO手机</a></li>
                    <li><a href="#">魅蓝手机</a></li>
                    <li><a href="#">MX手机</a></li>
                    <li><a href="#">精选配件</a></li>
                    <li><a href="#">智能硬件</a></li>
                </ul>
            </div>
        </div>
        <!-- 导航 navi 区域结束 -->
        <!-- 分类 classification 区域开始 -->
        <div class="classification">
            <div class="inner-c classify-c">
                <div class="classify">
                    <ul>
                        <li><a href="#">全部商品分类</a></li>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">智能硬件</a></li>
                        <li><a href="#">耳机 / 音箱</a></li>
                        <li><a href="#">路由器 / 移动电源</a></li>
                        <li><a href="#">保护套 / 后盖 / 贴膜</a></li>
                        <li><a href="#">数据线 / 电源适配器</a></li>
                        <li><a href="#">周边配件</a></li>
                    </ul>
                </div>
                <div class="banner">
                    <ul>
                        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                        <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                    </ul>
                    <div class="btn">
                        <span class="left-btn"></span>
                        <span class="right-btn"></span>
                    </div>
                    <ol>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- 分类 classification 区域结束 -->
        <!-- 热门 hots 区域开始 -->
        <div class="hots">
            <div class="inner-c hots-c">
                <div class="fast-entrance">
                    <ul>
                        <li><a href="#"><img src="images/hot-0-1.png" alt=""><span>M码通道</span></a></li>
                        <li><a href="#"><img src="images/hot-0-2.png" alt=""><span>以旧换新</span></a></li>
                        <li><a href="#"><img src="images/hot-0-3.png" alt=""><span>魅族意外保</span></a></li>
                        <li><a href="#"><img src="images/hot-0-4.png" alt=""><span>回购单查询</span></a></li>
                    </ul>
                </div>
                <ul class="right">
                    <li><img src="images/hot-1.jpg" alt=""></li>
                    <li><img src="images/hot-2.jpg" alt=""></li>
                    <li><img src="images/hot-3.jpg" alt=""></li>
                    <li><img src="images/hot-4.png" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 热门 hots 区域开始 -->
        <!-- 手机 mobile 区域开始 -->
        <div class="mobile">
            <div class="inner-c mobile-c">
                <div class="top">
                    <span class="label">手机</span>
                    <a href="#">更多 ><img src="" alt=""></a>
                </div>
                <div class="bottom">
                    <ul><li>
                            <img src="images/mobile-1.png" alt="">
                            <span class="name">魅蓝note3</span>
                            <i class="hot-sale">热卖</i>
                            <span class="tag">11日-12日 限量开售</span>
                            <span class="price">￥ 799</span>
                        </li>
                        <li>
                            <img src="images/mobile-2.png" alt="">
                            <span class="name">魅蓝3</span>
                            <span class="tag">11日-12日 公开版限量开售</span>
                            <span class="price">￥ 599</span>
                        </li>
                        <li>
                            <img src="images/mobile-3.png" alt="">
                            <span class="name">魅蓝3s</span>
                            <i class="hot-sale">热卖</i>
                            <span class="tag">11日-12日 限量开售</span>
                            <span class="price">￥ 699</span>
                        </li>
                        <li>
                            <img src="images/mobile-4.png" alt="">
                            <span class="name">魅蓝 metal</span>
                            <i class="on-sale">特惠</i>
                            <span class="tag">领券立减100元</span>
                            <span class="price">￥ 999</span>
                        </li>
                        <li>
                            <img src="images/mobile-5.png" alt="">
                            <span class="name">魅蓝 E</span>
                            <i class="hot-sale">热卖</i>
                            <span class="tag">全网通 多彩金属机身</span>
                            <span class="price">￥ 1299</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 手机 mobile 区域结束 -->
    </div>
    <!-- content 区域结束 -->
    <!-- footer 区域开始 -->
    <div class="footer">
        <div class="inner-c footer-c">
            <ul>
                <li>
                    <span class="title">帮助说明</span>
                    <span>支付方式</span>
                    <span>配送说明</span>
                    <span>售后服务</span>
                    <span>付款帮助</span>
                </li>
                <li>
                    <span class="title">Flyme</span>
                    <span>开放平台</span>
                    <span>固件下载</span>
                    <span>软件商店</span>
                    <span>查找手机</span>
                </li>
                <li>
                    <span class="title">关于我们</span>
                    <span>关于魅族</span>
                    <span>加入我们</span>
                    <span>联系我们</span>
                    <span>法律声明</span>
                </li>
                <li>
                    <span class="title">关注我们</span>
                    <span>新浪微博</span>
                    <span>腾讯微博</span>
                    <span>QQ空间</span>
                    <span>官方微信</span>
                </li>
                <li>
                    <span class="tel-title">24小时全国服务热线</span>
                    <span class="tel">400-788-3333</span>
                    <span class="service">24小时在线客服</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="copyright">
        <div class="inner-c copyright-c">
            <span class="company">2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
            <a href="#">备案号：粤ICP备13003602号-2</a>
            <a href="#"> 经营许可证编号：粤B2-20130198</a>
            <span class="license">
                营业执照
                <img src="images/trust-icon.png" alt="">
                <img src="images/footer-copy-1.png" alt="">
            </span>
        </div>
    </div>
    <!-- footer 区域结束 -->
    <div class="backtotop">

    </div>
</body>
</html>